<div class="node-item {{nodeCssClass}}" reDraggable="re:node-item-drop" [disabled]="!allowDraggable"
     [dragData]="{node: node, parent: parentNode}">
  <div class="node-item-panel">
    <i class="node-expend-icon {{getNodeExpendIcon()}}"
       (click)="onExpendedIconClick($event)"></i>
    <div class="node-item-content" #nodeItemContent reDroppable="re:node-item-drop" (onDrop)="onDropNodeItem($event)"
         (onDragEnter)="onDragEnter()" (onDragLeave)="onDragLeave()" [acceptDrop]="isAcceptDrop">
      <div class="node-check-box">
        <hi-checkbox *ngIf="checkable" [(ngModel)]="node.$check" label=""
                     (valueChange)="nodeItemCheckedChange($event)"></hi-checkbox>
      </div>
      <ng-container *ngIf="!nodeItemTemplate">
      <span class="node-text" [ngClass]="{'bg-primary': node.$select}" (click)="onNodeItemClick($event)"
            (dblclick)="onNodeItemDbClicked($event)">
        <i *ngIf="iconField && node[iconField]"
           class="node-icon {{node[iconField]}}"></i> {{node[textField] || ''}} <span
        class="loading" *ngIf="isLoading">
        <i class="{{loadingIcon}}"></i></span>
      </span>
        <div class="toolbar">
          <ng-template *ngIf="nodeItemToolbarTemplate" [ngTemplateOutlet]="nodeItemToolbarTemplate"
                       [ngTemplateOutletContext]="{$implicit: node, parentNode:parentNode, tree: this}"></ng-template>
        </div>
      </ng-container>
      <ng-container *ngIf="nodeItemTemplate">
        <ng-template *ngIf="nodeItemTemplate" [ngTemplateOutlet]="nodeItemTemplate"
                     [ngTemplateOutletContext]="{$implicit: node,  parentNode:parentNode, tree: this }"></ng-template>
      </ng-container>
    </div>
  </div>
  <hi-tree-panel *ngIf="node.children && node.children.length && node.$expend"
                 class="children-view"
                 [treeData]="node.children"
                 [textField]="textField"
                 [valueField]="valueField"
                 [iconField]="iconField"
                 [checkable]="checkable"
                 [lazyLoad]="lazyLoad"
                 [loadingIcon]="loadingIcon"
                 [loadChildren]="loadChildren"
                 [allowDraggable]="allowDraggable && !isInDraggle"
                 [allowMutipleSelected]="allowMutipleSelected"
                 [parentNode]="node"
                 [nodeItemTemplate]="nodeItemTemplate"
                 [nodeItemToolbarTemplate]="nodeItemToolbarTemplate"
                 [leafIcon]="leafIcon"
                 [expendIcon]="expendIcon"
                 [collapseIcon]="collapseIcon"
                 (nodeItemCheckedChanged)="onChildrenNodeCheckedChange($event)"
  ></hi-tree-panel>
</div>
